<template>
    <div>
        <!--导航-->
         <div class="rotation-tab1">
            <ul>
                <li v-for="(item,index) in tablist" :key="index" @click="torouter(item.to)">{{item.name}}</li>
            </ul>
        </div>
        <!--轮播图-->
        <div class="rotation">
           
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(item,index) in rotationList" :key="index" class="rotation-item" style="">
                    <img :src="item.headImg" alt="" style="width:100%;height:100%; vertical-align: top;">
                </el-carousel-item>
            </el-carousel>
            <div class="poster">
                <div class="poster-text">联合全球时尚创意能量</div>
                <img src="../assets/img/logo-02.png" alt="" class="poster-logo">
                <div class="poster-text">FROM ZERO TO INFINITY</div>
            </div>
        </div>

        <!--公司简介-->
        <div class="introduction">
            <div class="h6">{{findOneCent.title}}</div>
            <div class="introduction-cent" v-html="findOneCent.content"></div>
            <div class="classification">
                <div class="classification-item">
                    <img src="../assets/img/M1IT.png" alt="" class="classification-bgd">
                    <div><span>线上旗舰店</span></div>
                </div>
                <div class="classification-item">
                    <img src="../assets/img/M1IT.png" alt="" class="classification-bgd">
                    <div><span>线下品牌结合店</span></div>
                </div>
                <div class="classification-item">
                    <img src="../assets/img/M1IT.png" alt="" class="classification-bgd">
                    <div><span>全球时装周</span></div>
                </div>
            </div>
            <div class="exhibition">
                <img :src="findOneCent.headImg" alt="">
                <div class="exhibition-choice">
                    <img :src="exhimg" alt="">
                    <div class="exhibition-choice-text">{{exhtitle}}</div>
                    <ul>
                        <li :class="lisI==index?'action':''" v-for="(item,index) in rotationList1" :key="index" @click="listab(index)"><span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--合作邮箱-->
        <div class="cooperation-email">
            <div class="subject">合作邮箱</div>
            <div class="cooperation-cent">
                <div class="cooperation-item">
                    <div>美妆</div>
                    <div>bd_beauty@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>时尚轻奢</div>
                    <div>Maxsoo@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>人事/招聘</div>
                    <div>career@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>社区反馈</div>
                    <div>community@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>美妆</div>
                    <div>bd_beauty@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>时尚轻奢</div>
                    <div>Maxsoo@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>人事/招聘</div>
                    <div>career@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>社区反馈</div>
                    <div>community@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>美妆</div>
                    <div>bd_beauty@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>时尚轻奢</div>
                    <div>Maxsoo@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>人事/招聘</div>
                    <div>career@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>社区反馈</div>
                    <div>community@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>美妆</div>
                    <div>bd_beauty@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>时尚轻奢</div>
                    <div>Maxsoo@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>人事/招聘</div>
                    <div>career@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>社区反馈</div>
                    <div>community@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>美妆</div>
                    <div>bd_beauty@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>时尚轻奢</div>
                    <div>Maxsoo@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>人事/招聘</div>
                    <div>career@xiaohongshu.com</div>
                </div>
                <div class="cooperation-item">
                    <div>社区反馈</div>
                    <div>community@xiaohongshu.com</div>
                </div>
            </div>
        </div>

        <!--更多关注方式-->
        <div class="follow">
            <div class="follow-tilte">更多方式关注MAXSOO</div>
            <div class="follow-item-box">   
                <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>下载MASOO</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MAXSOO微博</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MAXSOO小红书</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MAXSOO抖音</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MAXSOO微信公众号</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MASXSOO小程序</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>关注MAXSOO INS</div>
                </div>
                 <div class="follow-item">
                    <img src="../assets/img/SOSC6.png" alt="">
                    <div>下载MAXSOO</div>
                </div>
            </div>
        </div>
        <div class="operation" v-if="isshow">
            <div class="operation-item">
                <span class="iconfont icon-icon_pc icon"></span>
                <div>{{$t('langs.personal')}}</div>
            </div>
            <div class="operation-item" @click="toindex" style="border-top: 1px solid #fff;border-bottom: 1px solid #fff;">
                <span class="iconfont icon-shouye icon"></span>
                <div>{{$t('langs.gohome')}}</div>
            </div>
            <div class="operation-item" @click="totop">
                <span class="iconfont icon-gengxin icon"></span>
                <div>TOP</div>
            </div>
        </div>
    </div>
</template>

<script>
import {findType,findOne} from "@/common/request.js"
export default {
    data() {
        return {
            lisI: 0,
            isshow: false,
            tablist:[
                {
                    name:'首页',
                    to: '/'
                },
                {
                    name:'MAXSOO线上旗舰店',
                    to: '/flagshipstore'
                },
                {
                    name:'关于我们',
                    to: '/about'
                },
                {
                    name:'合作伙伴',
                    to: '/partners'
                },
                {
                    name:'SHOWROOM',
                    to: '/showroom'
                }],
            tabindex: null,
            rotationList: [],//轮播图
            rotationList1:[],//时装周轮播图
            exhimg: '',
            exhtitle:'',
            findOneCent: {}
        }
    },
    created() {
        this.getfindType()//轮播图
        this.getfindType1()//时装周轮播图
        this.getfindOne()
    },
    methods: {
        //首页富文本
        getfindOne() {
            findOne({
                articleId: 16
            }).then(res=>{
                console.log(res)
                // if(res.code == 0) {
                //     this.findOneCent = res.result
                // }
                
            })
        },
        getfindType() {//轮播图
            findType({typeId:31}).then(res=>{
                console.log(res)
                if(res.code===0) {
                    this.rotationList = res.result
                }
               
            })
        },
        getfindType1() {//时装周轮播图
            findType({typeId:32}).then(res=>{
                console.log(res)
                if(res.code===0) {
                    this.rotationList1 = res.result
                    this.exhimg = this.rotationList1[0].headImg
                    this.exhtitle = this.rotationList1[0].title
                }
               
            })
        },
        listab(i) {
            this.lisI = i
            this.exhimg = this.rotationList1[i].headImg
            this.exhtitle = this.rotationList1[i].title
        },
        showIcon() {
            if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 684) {            
                   this.isshow = true
                } else {
                    this.isshow = false
                }
        },
        torouter(page) {
            this.$router.push({
                path: page
            })
        },
        totop() {
            var timer = setInterval(()=>{
                document.documentElement.scrollTop = document.documentElement.scrollTop-50
                if(document.documentElement.scrollTop==0){
                    clearInterval(timer); 
                }
            },50)
        },
        toindex() {
            this.$router.push({
                path: '/'
            })
        }
    },
    mounted() {
        window.addEventListener("scroll", this.showIcon);
    },
}
</script>

<style lang='scss'>
body {
    background: #fff;
}
.rotation-tab1 {
    width: 100%;
    >ul {
        overflow: hidden;
        width: 640px;
        position: absolute;
        top: 78px;
        left: 50%;
        margin-left: -320px;
        z-index: 4;
        >li {
            float: left;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            margin: 0 25px;
            cursor: pointer;
        }
    }
}
.rotation {
    width: 100%;
    height: 684px;
    position: relative;
    .rotation-item {
        height: 100%;
        
    }
    .poster {
        width: 264px;
        height: 148px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -112px 0 0 -198px;
        z-index: 2;
        padding: 36px 66px 41px 66px;
        background: rgba(0,0,0,.3);
        text-align: center;
        .poster-text {
            font-size: 20px;
        }
        .poster-logo {
            width: 263px;
            height: 64px;
            margin: 16px 0 10px 0;
        }
    }
}

.introduction {
    width: 100%;
    padding: 94px 0 0 0;
    .h6 {
        font-size: 40px;
        color: #101010;
        text-align: center;
    }
    .introduction-cent {
        width: 1000px;
        font-size: 16px;
        color: #626262;
        line-height: 24px;
        margin-top: 60px;
    }
    .classification {
        overflow: hidden;
        width: 552px;
        margin-top: 74px;
        .classification-item {
            width: 184px;
            height: 264px;
            position: relative;
            float: left;
            .classification-bgd {
                width: 100%;
                height: 100%;
            }
            >div {
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.2);
                position: absolute;
                top: 0;
                left: 0;
                text-align: center;
                >span {
                    line-height: 264px;
                    font-size: 16px;
                    color: #101010;
                }
            }
        }
    }
    .exhibition {
        width: 1000px;
        height: 549px;
        margin-top: 224px;
        position: relative;
        >img {
            width: 895px;
            height: 549px;
            margin-left: 164px;
        }
        .exhibition-choice {
            width: 324px;
            height: 357px;
            border: 1px solid #bbbbbb;
            background: #fff;
            position: absolute;
            top: 53px;
            left: 0;
            text-align: center;
            padding-top: 85px;
            >img {
                width: 140px;
                height: 140px;
                border-radius: 50%;
            }
            .exhibition-choice-text {
                font-size: 14px;
                color: #101010;
                margin-top: 29px;

            }
            >ul {
                overflow: hidden;
                margin-top: 40px;
                display: inline-block;
                >li {
                    width: 20px;
                    height: 20px;
                    margin: 0 5px;
                    float: left;
                    position: relative;
                    cursor: pointer;
                     border: 1px solid #fff;
                    >span {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background: #000;
                        position: absolute;
                        top: 7px;
                        left: 7px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
.action {
    border: 1px solid #000 !important;
    border-radius: 50%;
}
.cooperation-email {
    background: #FBFBFB;
    width: 100%;
    margin-top: 131px;
    padding: 78px 0 123px 0;

    .subject {
        font-size: 36px;
        color: #101010;
        text-align: center;
    }
    .cooperation-cent {
        width: 1220px;
        margin-top:20px;
        // margin-right: 10px;
        overflow: hidden;
       
        .cooperation-item {
            width: 237px;
            margin-top: 40px;
            margin-right: 64px;
            float: left;
            >div:nth-child(1) {
                font-size: 18px;
                color: #101010;
                font-weight: 600;
            }
            >div:nth-child(2) {
                font-size: 16px;
                color: #141414;
                margin-top: 10px;
            }
        }

    }
}
.follow {
    margin-top: 90px;
    .follow-tilte {
        font-size: 36px;
        color: #101010;
        text-align: center;
    }
    .follow-item-box {
        width: 780px;
        overflow: hidden;
        margin-bottom: 140px;
        .follow-item {
            float: left;
            width: 190px;
            margin-top: 80px;
            text-align: center;
            >img {
                width: 100px;
                height: 100px;
            }
            >div {
                font-size: 16px;
                color: #484848;
                text-align: center;
                margin-top: 10px;
            }
        }
    }
}
.operation {
    position: fixed;
    right: 0;
    top: 231px;
    z-index: 3;
    .operation-item {
        background: #000;
        width: 62px;
        height: 82px;
        text-align: center;
        padding-top: 18px;
        >.icon {
            font-size: 28px;
            color: #fff;
        }
        >div {
            font-size: 14px;
            color: #fff;
            margin-top: 8px;
        }
    }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 684px;
    margin: 0;
}
.el-carousel__container {
    height: 684px;
}
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.el-carousel__arrow {
    width: 100px;
    height: 100px;
    background: none;
    font-size: 100px;
}
.el-carousel__arrow:hover {
    background-color: none;
}
</style>